<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <div class="filter-item">
        <el-select v-model="projectId" @change="projectChange" placeholder="请选择工程">
          <el-option v-for="project in projectLists" :key="project.id" :label="project.projectName" :value="project.id"></el-option>
        </el-select>
        <el-select v-model="itemId" @change="projectItemChange" style="margin-left:10px;" placeholder="请选择项目">
          <el-option v-for="projectItem in projectItemLists" :key="projectItem.id" :label="projectItem.itemName" :value="projectItem.id"></el-option>
        </el-select>
        <el-select v-model="costListQuery.param.state" @change="costStateChange" style="margin-left:10px;">
          <el-option label="所有" :value="-1"></el-option>
          <el-option label="未审核" :value="0"></el-option>
          <el-option label="审核通过" :value="1"></el-option>
          <el-option label="审批拒绝" :value="2"></el-option>
        </el-select>
      </div>
    </div>

    <h5>项目信息</h5>
    <el-table :data="[projectItemInfo]" style="width: 100%">
      <el-table-column prop="itemName" label="项目名称" width="180" show-overflow-tooltip></el-table-column>
      <el-table-column prop="itemDesc" label="项目描述" width="180" show-overflow-tooltip></el-table-column>
      <el-table-column prop="budgetAmount" label="预计金额" width="180"></el-table-column>
      <el-table-column prop="budgetDosage" label="预计用量" width="180"></el-table-column>
      <el-table-column prop="factAmount" label="实际金额" width="180"></el-table-column>
      <el-table-column prop="factDosage" label="实际用量" width="180"></el-table-column>
      <el-table-column prop="unit" label="单位" width="180"></el-table-column>
      <el-table-column prop="unCheckCostAmount" label="未审核金额" width="180"></el-table-column>
      <el-table-column prop="checkCostAmount" label="已审核金额" width="180"></el-table-column>
    </el-table>
    <h5>报销列表</h5>
    <el-table :data="costLists" style="width: 100%">
      <el-table-column prop="id" v-if="false"></el-table-column>
      <el-table-column type="expand">
        <template slot-scope="scope">
          <span :key="image" v-for="(image, index) in scope.row.images">
            <el-image style="width:30px;height:30px;margin-left:10px" :src="image | costInfoMinImgUrl" :preview-src-list="getImgList(scope.row.images, index)">
            </el-image>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="名称" width="200" prop="costName" show-overflow-tooltip></el-table-column>
      <el-table-column label="描述" width="200" prop="costDesc" show-overflow-tooltip></el-table-column>
      <el-table-column label="类型" width="200" prop="costType"></el-table-column>
      <el-table-column label="金额" width="200" prop="costAmount"></el-table-column>
      <el-table-column label="报销人" width="200" prop="userName"></el-table-column>
      <el-table-column label="报销时间" width="200" prop="createTime"></el-table-column>

      <el-table-column label="经理审核人" width="200" prop="managerApproveUser"></el-table-column>
      <el-table-column label="经理审核时间" width="200" prop="managerApproveTime"></el-table-column>
      <el-table-column label="经理审核备注" width="200" prop="managerApproveReason" show-overflow-tooltip></el-table-column>

      <el-table-column label="财务审核人" width="200" prop="financerApproveUser"></el-table-column>
      <el-table-column label="财务审核时间" width="200" prop="financerApproveTime"></el-table-column>
      <el-table-column label="财务审核备注" width="200" prop="financerApproveReason" show-overflow-tooltip></el-table-column>

      <el-table-column label="状态" width="100" fixed="right">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.state === 0" type="info">未审核</el-tag>
          <el-tag v-else-if="scope.row.state === 1" type="success">经理审核</el-tag>
          <el-tag v-else-if="scope.row.state === 2" type="success">财务审核</el-tag>
          <el-tag v-else-if="scope.row.state === 100" type="danger">经理退审</el-tag>
          <el-tag v-else-if="scope.row.state === 101" type="danger">财务退审</el-tag>
          <el-tag v-else type="danger">删除</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" fixed="right" v-if="approval_cost_button_status">
        <template slot-scope="scope">
          <el-popover v-if="approval_cost_button_status" trigger="click" placement="left" width="160" :ref="'popover' + scope.row.id" @after-leave="checkHide('costCheck' + scope.row.id)">
            <el-form :model="costCheckFrom" :rules="costCheckFromRules" :ref="'costCheck' + scope.row.id">
              <el-form-item prop="state">
                <el-select v-model="costCheckFrom.state">
                  <el-option label="通过" :value="1" />
                  <el-option label="拒绝" :value="0" />
                </el-select>
              </el-form-item>
              <el-form-item prop="reason">
                <el-input placeholder="审批理由" v-model="costCheckFrom.reason" />
              </el-form-item>
            </el-form>
            <div style="text-align: right; margin: 0">
              <el-button type="primary" size="mini" @click="checkFromSubmit('costCheck' + scope.row.id, scope.row.id)">确定</el-button>
            </div>
            <el-button slot="reference" :disabled="scope.row.state !== 0" style="margin-left:10px" type="primary" icon="el-icon-edit" size='mini'>审核</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleCostSizeChange" @current-change="handleCurrentChange" :current-page="costListQuery.page" :page-size="costListQuery.size" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 30, 50]" :total="costTotal" small>
    </el-pagination>

  </div>
</template>

<script>
import { mapGetters } from 'vuex';

import {
  getProjectInfo
} from '@/api/projectInfo'

import {
  getProjectItemInfo, getProjectItemByManager
} from '@/api/projectItemInfo'

import {
  getProjectCostByManager, managerAudit
} from '@/api/projectCostInfo';

export default {
  name: 'costCheckInfo',
  created() {
    this.getProjectLists();
    if (this.elements['manager_approval_cost']) {
      this.approval_cost_button_status = true;
    }
  },
  computed: {
    ...mapGetters(["elements"])
  },
  mounted() {
  },
  data() {
    return {
      // 查询工程列表
      projectLists: [],
      projectQuery: {
        page: 1,
        size: 2147483640,
        param: {}
      },
      // 查询工程项目列表
      projectItemLists: [],
      projectItemQuery: {
        page: 1,
        size: 2147483640,
        param: {
          projectId: undefined
        }
      },
      // 选中的工程Id
      projectId: undefined,
      // 选中的工程项目Id
      itemId: undefined,
      // 获取到的工程项目信息
      projectItemInfo: {},
      // 查询工程项目报销
      costListQuery: {
        page: 1,
        size: 10,
        param: {
          state: -1,
          projectId: undefined,
          itemId: undefined
        }
      },
      costLists: [],
      costTotal: 0,
      //报销审核列表
      costCheckFrom: {
        id: undefined,
        state: undefined,
        reason: undefined
      },
      costCheckFromRules: {
        state: [
          { required: true, message: "请选择", trigger: "blur" }
        ],
        reason: [
          { max: 200, message: '长度大于 200 个字符', trigger: 'blur' }
        ]
      },
      successCode: 20000,
      approval_cost_button_status: false,
    }
  },
  methods: {
    getImgList(images, index) {
      var imgLists = [];
      for (let i = index; i < images.length; i++) {
        imgLists.push(this.$options.filters['costInfoImgUrl'](images[i]));
      }
      for (let i = 0; i < index; i++) {
        imgLists.push(this.$options.filters['costInfoImgUrl'](images[i]));
      }
      return imgLists;
    },
    getProjectLists() {
      getProjectInfo(this.projectQuery).then(resp => {
        if (resp.code === this.successCode) {
          this.projectLists = resp.datas.datas;
        }
      });
    },
    projectChange() {
      // 加载工程项目
      this.projectItemQuery.param.projectId = this.projectId;
      this.getProjectItemLists();
    },
    getProjectItemLists() {
      getProjectItemInfo(this.projectItemQuery).then(resp => {
        if (resp.code === this.successCode) {
          this.projectItemLists = resp.datas.datas;
          this.itemId = undefined;
        }
      })
    },
    projectItemChange() {
      if (!this.itemId) {
        return;
      }
      // 查询工程项目信息
      this.getProjectItemData();
      // 查询报销列表
      this.costListQuery.page = 1;
      this.getProjectCostList();
    },
    getProjectItemData() {
      getProjectItemByManager(this.itemId).then(resp => {
        if (resp.code === this.successCode) {
          this.projectItemInfo = resp.datas;
        }
      });
    },
    // 获取工程报销列表
    getProjectCostList() {
      this.costListQuery.param.projectId = this.projectId;
      this.costListQuery.param.itemId = this.itemId;
      getProjectCostByManager(this.costListQuery).then(resp => {
        if (resp.code === this.successCode) {
          this.costLists = resp.datas.datas;
          this.costTotal = resp.datas.total;
        }
      })
    },
    costStateChange() {
      this.costListQuery.page = 1;
      this.getProjectCostList();
    },

    handleCostSizeChange(val) {
      this.costListQuery.size = val;
      this.getProjectCostList();
    },
    handleCurrentChange(val) {
      this.costListQuery.page = val;
      this.getProjectCostList();
    },

    checkFromSubmit(formname, id) {
      this.costCheckFrom.id = id;
      this.$refs[formname].validate((valid) => {
        if (!valid) {
          return false;
        }
        managerAudit(this.costCheckFrom).then(resp => {
          if (resp.code === this.successCode) {
            this.$notify({
              title: "成功",
              message: "审批成功",
              type: "success",
              duration: 2000
            });
            this.$refs['popover' + id].doClose();
            this.projectItemChange();
          }
        })
      });
    },

    checkHide(formname) {
      if (this.$refs[formname]) {
        this.$refs[formname].resetFields();
      }
    }

  }
}
</script>